<template>
  <el-dialog
    v-model="visible"
    :title="title"
    width="600px"
    @close="handleClose"
  >
    <div class="space-y-4">
      <div 
        v-for="(section, index) in sections"
        :key="index"
        class="border-l-4 border-blue-500 pl-4"
      >
        <h3 class="font-semibold text-gray-900 mb-2">{{ section.title }}</h3>
        <p class="text-gray-600 text-sm leading-relaxed">{{ section.content }}</p>
      </div>
    </div>
    
    <template #footer>
      <div class="flex justify-end">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps<{
  modelValue: boolean
  title: string
  sections: Array<{
    title: string
    content: string
  }>
}>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
}>()

const visible = ref(false)

watch(() => props.modelValue, (val) => {
  visible.value = val
})

const handleClose = () => {
  visible.value = false
  emit('update:modelValue', false)
}
</script>